<template>
	<view class="big_box">
		<u-navbar title="提现记录" :autoBack="true" :border="false"></u-navbar>
		
		<!-- 状态筛选 -->
		<!-- <view class="filter-box">
			<u-tabs :list="statusList" :current="currentStatus" @click="statusChange" 
				bar-width="60" active-color="#7dc5eb" inactive-color="#606266"></u-tabs>
		</view> -->
		
		<!-- 提现记录列表 -->
		<view class="list">
			<view class="list_item" v-for="(item, index) in listData" :key="item.id">
				<view class="top">
					<view class="title">
						<u-tag :text="item.status" :type="getStatusType(item.status)" 
							size="mini" shape="circle" />
						<!-- <text v-if="item.status === '已驳回'" class="reason" @click="showReason(item.reason)">
							(查看原因)
						</text> -->
					</view>
					<view class="time">
						{{item.createtime}}
					</view>
				</view>
				<view class="bottom">
					<view class="price">
						<text>提现金额：</text>
						<span>¥{{item.money}}</span>
					</view>
					<view class="price_kc">
						<text>手续费：</text>
						<span>¥{{item.sxf_price}}</span>
					</view>
					<view class="actual">
						<text>实际到账：</text>
						<span>¥{{item.true_money}}</span>
					</view>
				</view>
			</view>
			
			<!-- 加载更多 -->
			<u-loadmore :status="loadStatus" :icon-type="iconType" :load-text="loadText" />
		</view>
		
		<!-- 空状态 -->
		<u-empty v-if="listData.length === 0" mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png"
			margin-top="80"></u-empty>
		
		<!-- 驳回原因弹窗 -->
		<u-popup v-model="showReasonPopup" mode="center" border-radius="16" width="80%">
			<view class="popup-content">
				<view class="popup-title">驳回原因</view>
				<view class="popup-msg">{{rejectReason}}</view>
				<u-button type="primary" size="medium" @click="showReasonPopup = false">知道了</u-button>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		mapGetters
	} from "vuex";
	import api from '@/api/index.js'
	export default {
		data() {
			return {
				currentStatus: 0,
				statusList: [{
					name: '全部'
				}, {
					name: '处理中'
				}, {
					name: '已完成'
				}, {
					name: '已驳回'
				}],
				showReasonPopup: false,
				rejectReason: '',
				loadStatus: 'loadmore',
				iconType: 'circle',
				loadText: {
					loadmore: '上拉加载更多',
					loading: '正在加载...',
					nomore: '没有更多了'
				},
				listData: [],
				page:1
			}
		},
		computed: mapGetters(['isLogin', 'uid', 'userInfo']),
		onLoad() {
			// 模拟加载数据
			this.getWithdrawList();
		},
		onReachBottom() {
			if (this.loadStatus !== 'nomore') {
				this.loadStatus = 'loading';
				// 模拟延时加载
				this.page+=1
				setTimeout(() => {
					this.listData = [...this.listData, ...this.getMoreData()];
					this.loadStatus = 'nomore';
				}, 1000);
			}
		},
		methods: {
			// 获取提现记录列表
			 async getWithdrawList(loadmore = false) {
			        // 如果是加载更多且没有更多数据时直接返回
			        if (loadmore && this.loadStatus === 'nomore') return;
			        
			        try {
			            // 如果是加载更多，显示加载状态
			            if (loadmore) {
			                this.loadStatus = 'loading';
			            } else {
			                // 首次加载时重置页码
			                this.page = 1;
			            }
			            
			            const res = await api.getWithdrawList({
			                page: this.page
			            });
			            
			            if (res.response.statusCode === 200) {
			                const newData = res.data.data.list || [];
			                
			                if (loadmore) {
			                    // 加载更多数据时合并数组
			                    this.listData = [...this.listData, ...newData];
			                } else {
			                    // 首次加载时直接赋值
			                    this.listData = newData;
			                }
			                
			                // 判断是否有更多数据
			                if (newData.length === 0 || newData.length < 10) { // 假设每页10条，根据实际接口调整
			                    this.loadStatus = 'nomore';
			                } else {
			                    this.loadStatus = 'loadmore';
			                    this.page++; // 只有成功获取数据后才增加页码
			                }
			            }
			        } catch (err) {
			            console.error(err);
			            this.loadStatus = 'loadmore'; // 出错时恢复状态
			        }
			    },

			
			  // 上拉加载更多
			    onReachBottom() {
			        this.getWithdrawList(true);
			    },

			// 状态筛选变化
			statusChange(index) {
				this.currentStatus = index.index;
				// TODO: 根据筛选状态请求对应数据
				console.log('当前筛选状态:', this.statusList[index].name);
				this.filterData(this.statusList[index].name);
			},
			
			// 根据状态筛选数据
			filterData(status) {
				if (status === '全部') {
					// 重置为完整数据
					this.getWithdrawList();
					return;
				}
				// TODO: 实际业务中替换为接口筛选
				console.log('筛选状态:', status);
			},
			
			// 获取状态对应的标签类型
			getStatusType(status) {
				const typeMap = {
					'已完成': 'success',
					'处理中': 'warning',
					'已驳回': 'error'
				};
				return typeMap[status] || 'info';
			},
			
			// 显示驳回原因
			showReason(reason) {
				this.rejectReason = reason;
				this.showReasonPopup = true;
			}
		}
	}
</script>
<style>
	::v-deep .u-tabs__wrapper__nav__item {
		padding: 0 22px !important;
	}
</style>
<style lang="scss" scoped>
	.big_box {
		padding: 24rpx;
		min-height: 100vh;
		background-color: #f7f7f7;
	}
	
	.filter-box {
		margin-top: 80rpx;
		background-color: #fff;
		border-radius: 12rpx;
		padding: 0 20rpx;
		box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.05);
	}
	
	.list {
		margin-top: 100rpx;
		.list_item {
			background-color: #fff;
			border-radius: 12rpx;
			padding: 24rpx;
			margin-bottom: 20rpx;
			box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.05);
			
			.top {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding-bottom: 20rpx;
				border-bottom: 1rpx solid #f5f5f5;
				
				.title {
					display: flex;
					align-items: center;
					font-size: 30rpx;
					color: #333;
					
					.reason {
						margin-left: 10rpx;
						color: #7dc5eb;
						font-size: 24rpx;
					}
				}
				
				.time {
					font-size: 24rpx;
					color: #999;
				}
			}
			
			.bottom {
				padding-top: 20rpx;
				
				> view {
					display: flex;
					justify-content: space-between;
					margin-bottom: 12rpx;
					font-size: 28rpx;
					color: #666;
					
					&:last-child {
						margin-bottom: 0;
					}
					
					span {
						color: #333;
						font-weight: 500;
					}
				}
				
				.actual {
					span {
						color: #7dc5eb;
						font-size: 30rpx;
					}
				}
			}
		}
	}
	
	.popup-content {
		padding: 40rpx;
		text-align: center;
		
		.popup-title {
			font-size: 32rpx;
			font-weight: bold;
			margin-bottom: 30rpx;
			color: #333;
		}
		
		.popup-msg {
			font-size: 28rpx;
			color: #666;
			margin-bottom: 40rpx;
			line-height: 1.6;
			text-align: left;
		}
	}
</style>
